<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>公共发布</title>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
    <link href="lib/layui/css/layui.css" rel="stylesheet">
    <link href="https://www.layuicdn.com/layui-v2.6.8/css/layui.css" rel="stylesheet">
</head>
<body>
<div style="padding: 20px;">
    <form class="layui-form" lay-filter="publicForm">
        <div class="layui-form-item">
            <label class="layui-form-label">标题</label>
            <div class="layui-input-block">
                <input autocomplete="off" class="layui-input" lay-verify="required|titleLength" name="title"
                       placeholder="请输入标题(10-15个字)" type="text">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">内容</label>
            <div class="layui-input-block">
                <textarea class="layui-textarea" lay-verify="required|contentLength" name="content"
                          placeholder="请输入内容(10-200个字)"></textarea>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">有效期至</label>
            <div class="layui-input-block">
                <input autocomplete="off" class="layui-input" id="expiryDate" lay-verify="required"
                       name="expiryDate" placeholder="请选择有效期" type="text">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">是否置顶</label>
            <div class="layui-input-block">
                <select lay-verify="required" name="isTop">
                    <option value="0">不置顶</option>
                    <option value="1">置顶</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-filter="publicSubmit" lay-submit>立即发布</button>
                <button class="layui-btn layui-btn-primary" type="reset">重置</button>
            </div>
        </div>
    </form>
</div>

<script src="lib/layui/layui.js"></script>
<script src="js/jquery-3.7.1.min.js"></script>
<script src="https://www.layuicdn.com/layui-v2.6.8/layui.js"></script>
<script>
    layui.use(['form', 'layer', 'laydate'], function () {
        var form = layui.form;
        var layer = layui.layer;
        var laydate = layui.laydate;

        // 初始化日期选择器（修复版）
        laydate.render({
            elem: '#expiryDate',
            type: 'datetime',
            min: 0, // 限制最小日期为今天
            format: 'yyyy-MM-dd HH:mm:ss',
            trigger: 'click' // 明确指定触发方式
        });


        // 自定义验证规则
        form.verify({
            titleLength: function (value) {
                if (value.length < 10 || value.length > 15) {
                    return '标题长度必须在10到15个字之间';
                }
            },
            contentLength: function (value) {
                if (value.length < 10 || value.length > 200) {
                    return '内容长度必须在10到200个字之间';
                }
            }
        });

        // 监听提交
        form.on('submit(publicSubmit)', function (data) {
            // 构造请求数据
            var postData = {
                title: data.field.title,
                content: data.field.content,
                expiryTime: new Date(data.field.expiryDate).toISOString(),
                publisherId: sessionStorage.getItem('userId'),
                isTop: data.field.isTop
            };

            // 发送到业主小区公告
            $.ajax({
                url: '/notices/publishToOwners',
                type: 'post',
                contentType: 'application/json',
                data: JSON.stringify(postData),
                success: function (res) {
                    if (res.code === 200) {
                        layer.msg('发布成功', {icon: 1});
                        $("form")[0].reset(); // 清空表单
                    } else {
                        layer.msg('发布失败: ' + res.msg, {icon: 2});
                    }
                },
                error: function (xhr, status, error) {
                    layer.msg('请求出错: ' + error, {icon: 2});
                }
            });

            return false;
        });
    });
</script>
</body>
</html>
